<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="大学生就业实训,品质就业,职业规划,IT行业人才基地" />
		<title>蜗牛书城(woniuxy.com)-正品低价、品质保障、配送及时、轻松购物！</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link th:href="@{/bootstrap-3.4.1/css/bootstrap.min.css}" rel="stylesheet">
		<!-- 引入jQuery核心js文件 -->
		<script th:src="@{/javascript/jQuery-1.12.4.js}"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script th:src="@{/bootstrap-3.4.1/js/bootstrap.min.js}"></script>


		<link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon" />
		<link th:href="@{/css/common.css}" rel="stylesheet" />
		<link th:href="@{/css/top.css}" rel="stylesheet" />
		<link th:href="@{/css/foot.css}" rel="stylesheet" />

		<link th:href="@{/css/center.css}" rel="stylesheet" />
		<script th:src="@{/javascript/center.js}"></script>

	</head>

	<body>
		<!--  最顶部的导航栏 -->
		<div th:replace="~{common::top}"></div>

		<!--  =================== head =============================== -->
		<div class="head">
			<div class="container">
				<!-- ============= logo ============= -->
				<div class="logo fl">
					<h1>
						<a class="hot-word">蜗牛学苑</a>
					</h1>
				</div>
				<!-- ============= 搜索框部份 ============= -->
				<div class="search fl ml100">
					<div class="up">
						<div class="search-box fl mr18">
							<input class="fl" type="text" value="请输入搜索关键字" />
							<span class="photo">&#xe663;</span>
							<span class="search-icon fl">&#xe660;</span>
						</div>

						<div class="cart fl">
							<span class="iconfont">&#xe622;</span>
							<a>我的购物车</a>
							<i class="num">0</i>
						</div>
					</div>

					<div class="navitems">
						<ol>
							<li><a class="red-and-weight" href="#">秒杀</a></li>
							<li><a class="red-and-weight" href="#">优惠券</a></li>
							<li><a href="#">程序设计</a></li>
							<li><a href="#">数据库</a></li>
							<li><a href="#">网络与数据通信</a></li>
							<li><a href="#">科普读物</a></li>
							<li><a href="#">建筑学</a></li>
						</ol>
					</div>

				</div>
			</div>
		</div>



		<!-- ==================== 个人信息中心 ==================== -->
		<div class="container no-padding center">
			<div class="row">
				<div class="col-xs-3 no-padding">
					<div class="account-info">
						<img id="userImg" th:src="@{|http://192.168.146.10:8099/book/user/01.jpg|}" alt="更换头像" data-toggle="modal" data-target="#myModal" />
						<p class="account" th:text="${session.account.userName}"></p>
						<p>
							<a href="#" id="account-detail">账号信息</a>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#" id="account-address">收货地址</a>
						</p>

						<div class="row member">
							<div class="col-xs-7 no-padding">
								<span>开通书城会员尊享</span>
								<span>全年360元运费礼券</span>
							</div>
							<div class="col-xs-5 no-padding">
								<a href="#">立即开通</a>
							</div>
						</div>
					</div>
				</div>

				<div class="col-xs-9">
					<div class="order-title">我的订单：</div>
					<div class="order-option">
						<div class="col-xs-2 col-xs-offset-1">
							<div class="op">
								<span class="iconfont">&#xe644;</span>
								<a href='#'>待付款</a>
							</div>
						</div>
						<div class="col-xs-2">
							<div class="op">
								<span class="iconfont">&#xe771;</span>
								<a href='#'>待收货</a>
							</div>

						</div>
						<div class="col-xs-2">
							<div class="op">
								<span class="iconfont">&#xe605;</span>
								<a href='#'>待评价</a>
							</div>
						</div>
						<div class="col-xs-2">
							<div class="op">
								<span class="iconfont">&#xe699;</span>
								<a href='#'>退换/售后</a>
							</div>
						</div>
						<div class="col-xs-2">
							<div class="op">
								<span class="iconfont">&#xe737;</span>
								<a href='#'>全部订单</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- ========================= 详细信息显示位置 ========================== -->
		<div class="container no-padding center">
			<div id="showAll">
				<ul class="nav nav-tabs">
					<li role="presentation" class="active"><a href="#">账号信息</a></li>
					<li role="presentation"><a href="#" th:onclick="selectAddress()">收货地址</a></li>
					<li role="presentation"><a href="#">新增地址</a></li>
				</ul>
				<!-- 账号详细信息 -->
				<div class="account-detail" style="display: none;">

					<form id="form-account-detail" class="form-horizontal mt15">
						<div class="form-group">
							<label class="col-xs-2 control-label">账号:</label>
							<div class="col-xs-6">
								<input type="text" class="form-control" th:value="${session.account.userName}" disabled>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-2 control-label">手机:</label>
							<div class="col-xs-6">
								<input type="text" class="form-control" th:value="${session.account.phoneNumber}" disabled>
							</div>
							<button type="button" class="btn btn-default col-xs-1" data-toggle="modal" data-target="#myModal01">修改</button>
						</div>

						<div class="form-group">
							<label class="col-sm-2 control-label">密码:</label>
							<div class="col-xs-6">
								<input type="password" class="form-control" th:value="${session.account.password}" disabled>
							</div>
							<button type="button" class="btn btn-default col-xs-1" data-toggle="modal" data-target="#myModal02">修改</button>
						</div>
					</form>

				</div>

				<!-- Modal -->
				<div class="modal fade" id="myModal01" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="myModalLabel">修改</h4>
							</div>
							<div class="modal-body" id="phoneNumber">
								<input type="text" name="phoneNumber" th:value="${session.account.phoneNumber}">
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" onclick="edit()">修改</button>
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							</div>
						</div>
					</div>
				</div>

				<div class="modal fade" id="myModal02" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="myModalLabel">修改</h4>
							</div>
							<div class="modal-body" id="password">
								<input type="text" name="password" th:value="${session.account.password}">
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" onclick="edit()">修改</button>
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								
							</div>
						</div>
					</div>
				</div>
				
				
				
				

				<!-- 地址详细信息 -->
				<div class="account-address" style="display: none;">
					<table class="table table-striped">
						<tr>
							<th>收货人</th>
							<th>手机</th>
							<th>详细地址</th>
						</tr>
						<tbody id="showAllAddress"></tbody>
					</table>
				</div>


				<!-- 新增地址 -->
				<div class="account-newadd" style="display: none;">
					<form id="form-newadd" class="form-horizontal mt15" method="post">
						<div class="form-group">
							<label class="col-xs-2 col-xs-offset-1 control-label">收货人:</label>
							<div class="col-xs-6">
								<input type="text" class="form-control" name="receiverName">
							</div>
						</div>

						<div class="form-group">
							<label class="col-xs-2 col-xs-offset-1 control-label">联系电话:</label>
							<div class="col-xs-6">
								<input type="text" class="form-control" name="receiverTel">
							</div>
						</div>

						<div class="form-inline">
							<label class="col-xs-2 col-xs-offset-1 control-label">收货地址:</label>
							<div class="col-xs-5">

								<select id="province" class="form-control" th:onclick="findProvinces()">
									<option>请选择省份</option>
								</select>

								<select id="city" class="form-control" th:onclick="findCities()">
									<option>请选择城市</option>
								</select>

								<select id="country" class="form-control" th:onclick="findAreas()">
									<option>请选择区县</option>
								</select>

								<select id="street" class="form-control" th:onclick="findStreets()">
									<option>请选择街道</option>
								</select>

								<select id="villages" class="form-control" th:onclick="findVillages()">
									<option>请选择社区</option>
								</select>

							</div>
						</div>


						<div class="form-group"></div>

						<div class="form-group">
							<label class="col-xs-2 col-xs-offset-1 control-label">详细地址:</label>
							<div class="col-xs-6">
								<input type="text" class="form-control" name="details">
							</div>
						</div>
						
						<div class="form-group">
							<div class="col-xs-3 col-xs-offset-3">
								<input type="submit" class="btn btn-primary btn-block"  th:onclick="doSubmit()">
							</div>
							<div class="col-xs-3">
								<input type="reset" class="btn btn-info btn-block">
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>


		<!-- 修改头像模态框 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">Modal title</h4>
					</div>
					<div class="modal-body">

						<div class="img-box">
							<div class="account-img col-xs-2 no-padding">
								<img src="http://localhost/user/01.jpg">
							</div>
							<div class="account-img col-xs-2 no-padding">
								<img src="http://localhost/user/02.jpg">
							</div>
							<div class="account-img col-xs-2 no-padding">
								<img src="http://localhost/user/03.jpg">
							</div>
							<div class="account-img col-xs-2 no-padding">
								<img src="http://localhost/user/04.jpg">
							</div>
							<div class="account-img col-xs-2 no-padding">
								<img src="http://localhost/user/05.jpg">
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭窗口</button>
						<button type="button" class="btn btn-default" onclick="doEditImg()">确定修改</button>
					</div>
				</div>
			</div>
		</div>


		<!-- =============== 最后的网站底部 =============== -->
		<div th:replace="~{common::footer}"></div>

	</body>
	<script>
		//修改用户信息
		function edit() {
			$.ajax({
				url: "/account/updateUserInfo",
				type: "PUT",
				data: {
					"phoneNumber": $("input[name='phoneNumber']").val(),
					"password": $("input[name='password']").val(),
				},
				dataType: "json",
				success: function (json) {
					console.log(json);
					if (json.data==1) {
						alert("修改成功");
						location.reload();
					} else {
						alert("修改失败");
					}
				}
			});
		}
		
		//查询该用户所有的地址
		function selectAddress(){
			$.ajax({
				url:"/address/getAddress",
				type:"post",
				dataType: "json",
				success:function(json){
					console.log(json.data);
                    if(json.code==200){
                        $("#showAllAddress").empty();
						 $.each(json.data,function (index,item){
							 var row = '<tr>';
							 $.each(item, function (key, value) {
								 if (key === 'receiverTel' || key === 'receiverName' || key === 'detail') {
									 row += '<td>' + value + '</td>';
								 }
								 
							 });
							 row += "</tr>";
							 $("#showAllAddress").append(row);
						 });
                    }else {
						alert("查询失败");
					}
				}
			})
			
		}
	
		
		function doSubmit() {
			$.ajax({
				url: "/address/addAddress",
				type: "POST",
				data: {
					"receiverName": $("input[name='receiverName']").val(),
					"receiverTel": $("input[name='receiverTel']").val(),
					"provinceCode": $("#province option:selected").val(),
					"cityCode": $("#city option:selected").val(),
					"areaCode": $("#country option:selected").val(),
					"streetCode": $("#street option:selected").val(),
					"villagesCode": $("#villages option:selected").val(),
					"details": $("input[name='details']").val()
				},
				dataType: "json",
				success: function (json) {
					console.log(json);
					if (json.data === 1) {
						alert(json.msg);
						location.reload();
					} else {
						alert(json.msg);
					}
				}
			});
		}

		function findProvinces() {
			$.ajax({
				url: "/address/findProvinces",
				type: "GET",
				success: function (data) {
					for (let province of data.data) {
						let $option = $('<option value="' + province.code + '">' + province.name + '</option>');
						$("#province").append($option);
					}
				}
			});
		}

		function findCities() {
			$.ajax({
				url: "/address/findCities?provinceCode=" + $("#province option:selected").val(),
				type: "GET",
				success: function (data) {
					for (let city of data.data) {
						let $option = $('<option value="' + city.code + '">' + city.name + '</option>');
						$("#city").append($option);
					}
				}
			});
		}

		function findAreas() {
			$.ajax({
				url: "/address/findAreas?cityCode=" + $("#city option:selected").val(),
				type: "GET",
				success: function (data) {
					for (let area of data.data) {
						let $option = $('<option value="' + area.code + '">' + area.name + '</option>');
						$("#country").append($option);
					}
				}
			});
		}

		function findStreets() {
			$.ajax({
				url: "/address/findStreets?areaCode=" + $("#country option:selected").val(),
				type: "GET",
				success: function (data) {
					for (let street of data.data) {
						let $option = $('<option value="' + street.code + '">' + street.name + '</option>');
						$("#street").append($option);
					}
				}
			});
		}

		function findVillages() {
			$.ajax({
				url: "/address/findVillages?streetCode=" + $("#street option:selected").val(),
				type: "GET",
				success: function (data) {
					for (let village of data.data) {
						let $option = $('<option value="' + village.code + '">' + village.name + '</option>');
						$("#villages").append($option);
					}
				}
			});
		}

	</script>
</html>
